<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>草稿滚动</title>
		<style type="text/css">
			*{ margin: 0;padding: 0;}
			
			#box{ width: 220px;
			      height: 342px;
			      background: #EEEEEE;}
			#box img { margin-top: 20px;}
			#pic{ background: #fff;
			      width: 180px;
			      height: 148px;
			      overflow: hidden;
			      margin: 0 auto;
			      border: #CCCCCC dashed 1px;}
			ul{  width: 160px;
			     margin: 5px auto;}
			ul  li{ font-size: 12px;
			        font-family: "微软雅黑";
			        color: #666;
			        line-height:23px;}
			ul li span{color: #FF0000;}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="../img/lvyoubao.png" />
			<div id="pic">
				<ul>
					<li>lv1307417jzyv通过驴游宝已获得<span>￥213.57</span></li>
					<li>river2014大河通过驴游宝已获得<span>￥735.25</span></li>
					<li>from sina weibo kikiwiwi看世界(1740530632)通过驴游宝已获得<span>￥62.14</span></li>
					<li>席文爱小琬通过驴游宝已获得<span>￥189.67</span></li>
					<li>stefanie张小雅通过驴游宝已获得<span>￥166.0</span></li>
				</ul>
			</div>
			
		</div>
	</body>
</html>
<script type="text/javascript">
	var pic=document.getElementById("pic");
	var list=document.getElementById("pic").getElementsByTagName('li');
	var timer=null;
	
	function auto(){
		timer=setInterval(function(){
			change();
		},2000)
	}
	auto();
	
	function change(){
		var  li=document.createElement('li');
		li.innerHTML=list[0].innerHTML;
  		var h=-list[0].offsetHeight;
		domove(list[0],'margin-top',h,function(){
			list[0].parentNode.appendChild(li);
			list[0].parentNode.removeChild(list[0]);
		});
	}
	
	function domove(obj,attr,target,endFn){
		clearInterval(obj.time);
		obj.time=setInterval(function(){
			var speed=(target-parseInt(getstyle(obj,attr)))/6;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			if(parseInt(getstyle(obj,attr))==target){
				clearInterval(obj.time);
				endFn();
			}else{
				obj.style[attr]=parseInt(getstyle(obj,attr))+speed+'px';
			}
		},30)
	}
	
	pic.onmouseover=function(){
		clearInterval(timer);
	}
	pic.onmouseout=function(){
		auto();
	}
	function getstyle(obj,attr){
		return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
	}
</script>